import React from 'react';
import { Card, Form, Input, Button, message, Icon, Checkbox, Radio, Select, Switch, DatePicker, TimePicker, Upload, InputNumber } from 'antd';
import moment from 'moment';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const TextArea = Input.TextArea;

class FormRegister extends React.Component {
  state = {
    userImg: ''
  }

  handelSubmit = () => {
    let formData = this.props.form.getFieldsValue();
    console.log(JSON.stringify(formData));
    this.props.form.validateFields((err, values) => {
      if (!err) {
        message.success('注册成功');
      }
    })
  }

  handelReset=()=>{
    this.props.form.resetFields();
  }

  getBase64 = (img, callback) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  }

  handleChange = (info) => {
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      this.getBase64(info.file.originFileObj, imageUrl => this.setState({
        imageUrl,
        loading: false,
      }));
    }
  }

  render() {
    const { getFieldDecorator } = this.props.form;

    const fromItemLayout = {
      labelCol: {
        xs: 24,
        sm: 4
      },
      wrapperCol: {
        xs: 24,
        sm: 12
      }
    }

    const offsetLayout = {
      wrapperCol: {
        xs: 24,
        sm: {
          span: 12,
          offset: 4
        }
      }
    }

    return (
      <div>
        <Card title="注册表单">
          <Form layout="horizontal">
            <FormItem label="用户名" {...fromItemLayout}>
              {
                getFieldDecorator('username', {
                  initialValue: '',
                  rules: [
                    {
                      required: true,
                      message: '用户名不能为空'
                    }
                  ]
                })(
                  <Input prefix={<Icon type="user" />} placeholder="请输入用户名"></Input>
                )
              }
            </FormItem>
            <FormItem label="密码" {...fromItemLayout} >
              {
                getFieldDecorator('pwd', {
                  initialValue: '',
                  rules: [
                    {
                      required: true,
                      message: '密码不能为空'
                    }
                  ]
                })(
                  <Input prefix={<Icon type="lock" />} placeholder="请输入密码"></Input>
                )
              }
            </FormItem>
            <FormItem label="性别" {...fromItemLayout}>
              {
                getFieldDecorator('sex', {
                  initialValue: '1',
                })(
                  <RadioGroup>
                    <Radio value="1">男</Radio>
                    <Radio value="2">女</Radio>
                  </RadioGroup>
                )
              }
            </FormItem>
            <FormItem label="年龄" {...fromItemLayout}>
              {
                getFieldDecorator('age', {
                  initialValue: '18',
                })(
                  <InputNumber type="text" />
                )
              }
            </FormItem>
            <FormItem label="当前状态" {...fromItemLayout}>
              {
                getFieldDecorator('state', {
                  initialValue: '2',
                })(
                  <Select>
                    <Option value="1">咸鱼</Option>
                    <Option value="2">浪子</Option>
                    <Option value="3">才子</Option>
                    <Option value="4">创业者</Option>
                  </Select>
                )
              }
            </FormItem>
            <FormItem label="爱好" {...fromItemLayout}>
              {
                getFieldDecorator('interest', {
                  initialValue: ['1', '2', '5'],
                })(
                  <Select mode="multiple">
                    <Option value="1">游泳</Option>
                    <Option value="2">打篮球</Option>
                    <Option value="3">跑步</Option>
                    <Option value="4">爬山</Option>
                    <Option value="5">骑行</Option>
                    <Option value="6">桌球</Option>
                    <Option value="7">麦霸</Option>
                    <Option value="8">踢足球</Option>
                  </Select>
                )
              }
            </FormItem>
            <FormItem label="是否已婚" {...fromItemLayout}>
              {
                getFieldDecorator('isMarried', {
                  valuePropName: 'checked',
                  initialValue: true
                })(
                  <Switch />
                )
              }
            </FormItem>
            <FormItem label="生日" {...fromItemLayout}>
              {
                getFieldDecorator('birthday', {
                  initialValue: moment('2018-08-08')
                })(
                  <DatePicker />
                )
              }
            </FormItem>
            <FormItem label="联系地址" {...fromItemLayout}>
              {
                getFieldDecorator('address', {
                  initialValue: '北京市海淀区'
                })(
                  <TextArea
                    autosize={{ minRows: 4 }}
                  />
                )
              }
            </FormItem>
            <FormItem label="早起实际" {...fromItemLayout}>
              {
                getFieldDecorator('time')(
                  <TimePicker />
                )
              }
            </FormItem>
            <FormItem label="头像" {...fromItemLayout}>
              {
                getFieldDecorator('userImg')(
                  <Upload
                    listType="picture-card"
                    showUploadList={false}
                    action="//jsonplaceholder.typicode.com/posts/"
                    onChange={this.handleChange}
                  >
                    {this.state.userImg ? <img src={this.state.userImg} /> : <Icon type="plus"></Icon>}
                  </Upload>
                )
              }
            </FormItem>
            <FormItem {...offsetLayout}>
              {
                getFieldDecorator('checkboxs')(
                  <Checkbox>我已经阅读<a href="#">xxxxx协议</a></Checkbox>
                )
              }
            </FormItem>
            <FormItem {...offsetLayout}>
              <Button type="primary" onClick={this.handelSubmit}>注册</Button>
              <Button type="primary" onClick={this.handelReset}>重置</Button>
            </FormItem>
          </Form>
        </Card>
      </div>
    );
  }
}

export default Form.create()(FormRegister);